<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
  <div id="item">
    <div id="main1" style="width: 600px;height:400px;"></div>
    <div id="main2" style="width: 600px;height:400px;"></div>
    <form th:action="@{/stuupdate}" method="post">


      <!--
      user.uid,user.username
      username=value
      uid=value
      -->

      <input type="hidden" name="stuId"/>
      <table id="userTab" style="border-collapse: collapse">
        <tr>
          <th>姓名：</th>
          <td>
            <input name="StuName" v-model="student.stuName"/>
          </td>
        </tr>
        <tr>
          <th>年龄:</th>
          <td>
            <input name="StutAge" v-model="student.stuAge" />
          </td>
        </tr>
        <tr>
          <th>创建时间：</th>
          <td>
            <input type="date" name="stuBir" v-model="student.stuBir">
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="submit" value="Update" />
          </td>
        </tr>
      </table>
    </form>
  </div>
  <script type="text/javascript">
    new Vue({
      el:'#item',
      data:{
        studentNames: [],
        student:{
          stuName:"",
          stuAge:"",
          stuBir:""
        }
      },
      mounted () {
        axios({
          url:'http://localhost:8090/springboottest/show_all_student'
        }).then(res=>{
          list = res.data.data;
          studentNames = new Array();
          stuages = new Array();
          for (var i = 0; i < list.length; i ++){
            studentNames[i] = list[i].stuName;
            stuages[i] = list[i].stuAge;
          }
          // 基于准备好的dom，初始化echarts实例
          var myChart1 = echarts.init(document.getElementById('main1'));

          // 指定图表的配置项和数据
          myChart1.setOption({
            title: {
              text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
              data: ['销量']
            },
            xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          });
          myChart1.setOption({
            xAxis: {
              data: studentNames
            },
            series: [
              {
                name: '销量',
                type: 'bar',
                data: stuages
              }
            ]
          });
          var myChart2 = echarts.init(document.getElementById('main2'));
         myChart2.setOption({
            xAxis: {
              data: ['A', 'B', 'C', 'D', 'E']
            },
            yAxis: {},
            series: [
              {
                data: [10, 22, 28, 23, 19],
                type: 'line',
                smooth: true
              }
            ]
          });
         myChart2.setOption({
           xAxis: {
             data: studentNames
           },
           yAxis: {},
           series: [
             {
               data: stuages,
               type: 'line',
               smooth: true
             }
           ]
         })
          console.log(list[1].stuName);
          console.log(studentNames);
          console.log(stuages)
        })
      },
    })
  </script>

  </body>
</html>